<template>
	<div class="base-table">
		<el-table v-loading="props.loading" :data="props.dataList" max-height="450" :scrollbar-always-on="true"
			:header-cell-style="tableHeaderColor" :default-sort="{ prop: 'createTime', order: 'descending' }"
			@selection-change="handleSelectionChange">
			<el-table-column v-if="props.checked" align="center" label="" type="selection" width="50" />

			<el-table-column v-if="!props.noSelection" align="center" label="序号" type="index" width="50" />

			<el-table-column v-for="item in props.columns.filter((e) => e.visible)" :key="item.key"
				:align="item.center ? 'center' : 'left'" :label="item.label"
				:show-overflow-tooltip="item.showHidden ? false : true" :min-width="item.minWidth ? item.minWidth : 200"
				:prop="item.prop" :sortable="item.prop == 'action' ? false : true"
				:width="item.width ? Number(item.width) + 20 : ''">
				<template v-if="item.type === 'dateTime'" #default="scope">
					<span>{{ parseTime(scope.row[item.prop], '{y}-{m}-{d} {h}:{i}') }}</span>
				</template>
				<template v-else-if="item.type === 'dateTimeSf'" #default="scope">
					<span>{{ parseTime(scope.row[item.prop], '{y}-{m}-{d} {h}:{i}') }}</span>
				</template>
				<template v-else-if="item.type === 'select'" #default="scope">
					<span> <dict-tag :options="item.data" :value="scope.row[item.prop]" /></span>
				</template>
				<template v-else-if="item.type === 'custom'" #default="scope">
					<slot :name="item.prop" :row="scope.row"></slot>
				</template>
			</el-table-column>
			<template #empty>
				<el-icon color="#F6707A" size="18px" style="position: relative; top: 4px">
					<WarningFilled />
				</el-icon> 抱歉，暂无相关信息！
			</template>
		</el-table>
	</div>
</template>
<script setup>

const props = defineProps({
	columns: {
		type: Array
	},
	dataList: {
		type: Array
	},
	loading: {
		type: Boolean
	},
	noSelection: {
		type: Boolean
	},
	checked: {
		type: Boolean
	}
})
const emits = defineEmits(['handleSelectionChange'])

const handleSelectionChange = (selection) => {
	emits('handleSelectionChange', selection)
}
const tableHeaderColor = () => {
	return { color: '#ffffff', backgroundColor: '#2f3f56 !important' }
}

</script>
<style lang="scss" scoped>
.header-class {
	background-color: #2f3f56 !important;
	color: #ffffff;
}

:deep(.el-scrollbar__wrap) {
	padding-bottom: 30px;
}
</style>
